ptb-fe/pages/signature/modul/[id].js

import React, { Component } from 'react';
import BasePage from "@/components/Layout/BasePage";

import { addDaftarHadirPeserta, getOneLaporanPublic, signature } from '../../../actions/public';
import { getAutoSave } from "@/actions/autosave";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import SignatureCanvas from 'react-signature-canvas'
import { addPesertaPleno } from '../../../actions/public';
import { toast } from "react-toastify";
import Router from "next/router";
import swal from "sweetalert2";
import Link from 'next/dist/client/link';
import moment from 'moment';





class PlenoSanksi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataLaporan: {},
            modal: false,
            signature: "",
            nama: "",
            data: {},
            changesign: false,
            pageDone: false,

        }
    }
    static getInitialProps = async ({ query }) => {
        return { query };

    };

    componentDidMount = async () => {
        const { query } = this.props;
        const { id } = query;
        const dataLaporan = await getOneLaporanPublic(id);
        this.setState({ dataLaporan });
    };

    toggleModal = (value = true) => {
        if (!value) {
            this.setState({ modal: false });
        } else {
            this.setState({ modal: !this.state.modal });
        }
    };
    sigPad = []
    clear = () => {
        this.sigPad.clear()
    }
    updateValueSignature = () => {
        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
        this.setState({
            signature: addsig,
            changesign: true

        })
    }

    updateValueNama = (e) => {
        this.setState({ nama: e.target.value });
    }


    onSubmit = async (e) => {

        const { query, token } = this.props;
        const { id } = query;
        const sign = this.state.signature
        const blob = await (await fetch(sign)).blob();
        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
        const formdata = new FormData();
        formdata.append("ttd", files);
        formdata.append("laporan_id", id);
        formdata.append("nama", this.state.nama);
        const added = await addDaftarHadirPeserta(token, formdata);
        const toastid = toast.loading("Please wait...");
        if (!added) {
            swal.fire({
                title: "Gagal Input Tanda Tangan",
                icon: "error",
                confirmButtonColor: "#3e3a8e",
            });

        } else {
            swal.fire({
                title: "Berhasil Input Tanda Tangan",
                icon: "success",
                confirmButtonColor: "#3e3a8e",
            });
            Router.push(`/signature/modul/done/${id}`);
        }
    };




    render() {
        const { signature, nama, changesign } = this.state

        return (
            <ContentWrapper unwrap>
                <Modal isOpen={this.state.modal} >

                    <ModalBody>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Nama:<span className=' text-danger'>*</span></label>
                            <div className="col-md-10">
                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
                            </div>
                        </FormGroup>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Tanda Tangan:</label>
                            <div className="col-md-10">
                                <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />
                            </div>
                        </FormGroup>
                        <ModalFooter>
                            <Button color className="btn-login" onClick={this.updateValueSignature
                            }>
                                <span className="font-color-white">Simpan</span>
                            </Button>
                            <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
                                Hapus
                            </Button>
                        </ModalFooter>
                        <ModalFooter>
                            <Button color className="bg-danger" onClick={this.toggleModal}>
                                Batal
                            </Button>
                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className=" color-3e3a8e" onClick={this.onSubmit}>
                                <span className="font-color-white ">Kirim</span>
                            </Button>

                        </ModalFooter>

                    </ModalBody>
                </Modal>

                <div className='page-sign'>
                    <div className=" ml-5">
                        <p >
                            Klik tombol Hadir untuk melakukan tanda tangan sebagai tanda bukti kehadiran rapat
                        </p>
                        <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Hadir</h4>
                        </Button>
                    </div>

                </div>


            </ContentWrapper>
        );
    }

}

PlenoSanksi.Layout = BasePage;
export default PlenoSanksi;